﻿@page "/about"

@inject IStringLocalizer<About> Localizer

<div class="flex flex-row h-full">
    <div class="py-8 px-10 flex-grow flex flex-col h-full" style="max-width: 800px">
        <h2 class="text-grey-300 mb-4">@Localizer["About"]</h2>
        <span>
            @Localizer["AboutSubtext"]<br/><br/>

            @Localizer["Goals"]
            <ul class="list-disc">
                <li class="ml-8">@Localizer["Streamline"]</li>
                <li class="ml-8">@Localizer["Accessible"]</li>
                <li class="ml-8">@Localizer["Fix"]</li>
                <li class="ml-8">@Localizer["Foundation"]</li>
                <li class="ml-8">@Localizer["Continue"]</li>
            </ul>
        </span>

        <h4 class="text-grey-300 mt-10 mb-2">@Localizer["Join"]</h4>
        <span>
            @Localizer["JoinSubtext1"] <Hyperlink Text=@Localizer["ExinerisDiscord"] Uri="https://discord.gg/7cNNwwJKsJ"/> @Localizer["JoinSubtext2"]
        </span>

        <h4 class="text-grey-300 mt-10 mb-2">@Localizer["Roadmap"]</h4>
        <span>
            @Localizer["RoadmapSubtext"]
            <ul class="list-disc">
                <li class="ml-8">@Localizer["Updates"]</li>
                <li class="ml-8">@Localizer["NodeEditor"]</li>
                <li class="ml-8">@Localizer["LevelEditor"]</li>
                <li class="ml-8">@Localizer["Further"]</li>
            </ul>
        </span>

        <div class="flex-grow"></div>

        <h4 class="text-grey-300 mt-10 mb-2">@Localizer["Support"]</h4>
        <span>
            @Localizer["SupportSubtext"]
        </span>
        
        <div class="row mt-6 mb-2">
            <div class="mr-4">
                <DonateButton Alt="Patreon" Text="Become a Patron" Url="https://www.patreon.com/Flagrum" ImageUrl="branding/patreon-logo.png"/>
            </div>
            <div class="mr-4">
                <DonateButton Alt="Ko-Fi" Text=@Localizer["Ko-Fi"] Url="https://ko-fi.com/kizari" ImageUrl="branding/kofi-logo.png"/>
            </div>
            <div class="mr-4">
                <DonateButton Alt="PayPal" Text=@Localizer["PayPal"] Url="https://ko-fi.com/kizari" ImageUrl="branding/paypal-logo.png" PayPal="true"/>
            </div>
            <div>
                <DonateButton Alt="Buy Me a Coffee" Text=@Localizer["BMC"] Url="https://buymeacoffee.com/Exineris" ImageUrl="branding/bmc-logo.png"/>
            </div>
        </div>

    </div>
    <div class="text-center py-10 px-10 flex-grow">
        <h2 class="text-grey-300 mb-10">@Localizer["Credits"]</h2>
        <h3 class="text-grey-300 mb-2">@Localizer["CoreDevelopment"]</h3>
        <h3 class="text-accent1-200">@Localizer["Kizari"]</h3>
        <h3 class="text-grey-300 mt-10 mb-2">@Localizer["Contributors"]</h3>
        <span class="text-accent1-200" style="line-height: 2">
            @Localizer["Rinual"]<br/>
            @Localizer["AsteriskAmpersand"]<br/>
            @Localizer["ImpatientTraveler"]<br/>
            @Localizer["Yretenai"]<br/>
            @Localizer["KatelynnKittaly"]<br/>
            @Localizer["Chisa"]<br/>
            @Localizer["Sai"]
        </span>
    </div>
</div>